import React, { Component, useEffect } from 'react';
import { Select, Spin } from 'antd';
import { connect } from 'umi';
import styles from './styles.less';
import { queryRegionByIds } from '@/services/geo.js'
import { useState } from 'react';
const { Option } = Select;
const nullSelectItem = {
  label: '',
  value: '',
  key: '',
};

class RegionSelect extends Component {

  constructor(props) {
    super(props);
    const { value } = this.props;
    this.state = {
      ...value,
    }
  }

  componentDidMount = () => {
    const { dispatch, provinceList, cityList } = this.props;

    if (dispatch && !provinceList) {
      dispatch({
        type: 'geo/fetchProvince',
      });
      if (this.state.provinceId) {
        dispatch({
          type: 'geo/fetchCity',
          payload: this.state.provinceId,
        });
      }
    }
  };

  getProvinceOption() {
    const { provinceList } = this.props;

    if (provinceList) {
      return this.getOption(provinceList);
    }

    return [];
  }

  getCityOption = () => {
    const { cityList } = this.props;

    if (cityList && this.state.provinceId) {
      return this.getOption(cityList);
    }

    return [];
  };
  getOption = (list) => {
    if (!list || list.length < 1) {
      return (
        <Option key={0} value={0}>
          没有找到选项
        </Option>
      );
    }

    return list.map((item) => (
      <Option key={item.id} value={item.id}>
        {item.name}
      </Option>
    ));
  };
  selectProvinceItem = (item) => {
    const { dispatch, onChange } = this.props;
    if (dispatch) {
      dispatch({
        type: 'geo/fetchCity',
        payload: item.key,
      });
    }
    if (onChange) {
      onChange({
        provinceId: item.key,
      });
    }
    this.setState({
      provinceId: item.key
    })
  };
  selectCityItem = (item) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange({
        provinceId: this.state.provinceId,
        cityId: item.key,
      });
    }
    this.setState({
      cityId: item.key,
    })
  };

  getItemByKey = (list, id) => {
    if (!list) {
      return;
    }
    for (let index = 0; index < list.length; index++) {
      if (list[index].id === id) {
        return {
          label: list[index].name,
          value: list[index].id,
          key: list[index].id,
        }
      }
    }
    return nullSelectItem;
  }

  conversionObject() {
    const { provinceList, cityList } = this.props;

    if (!this.state.provinceId) {
      return {
      };
    }
    const { provinceId, cityId } = this.state;

    return {
      province: provinceId ? this.getItemByKey(provinceList, provinceId) : nullSelectItem,
      city: cityId ? this.getItemByKey(cityList, cityId) : nullSelectItem,
    };
  }

  onClearProvice = () => {
    const { onChange } = this.props;
    if (onChange) {
      onChange({});
    }
    this.setState({
      provinceId: null,
      cityId: null,
    })
  }

  onClearCity = () => {
    const { onChange } = this.props;
    if (onChange) {
      onChange({
        provinceId: this.state.provinceId,
      });
    }
    this.setState({
      cityId: null,
    })
  }

  render() {
    const { province, city } = this.conversionObject();
    const { loading } = this.props;
    return (
      <Spin spinning={loading} wrapperClassName={styles.row}>
        <Select
          className={styles.item}
          value={province}
          labelInValue
          allowClear
          onClear={this.onClearProvice}
          onSelect={this.selectProvinceItem}
        >
          {this.getProvinceOption()}
        </Select>
        <Select
          className={styles.item}
          value={city}
          labelInValue
          allowClear
          onClear={this.onClearCity}
          onSelect={this.selectCityItem}
        >
          {this.getCityOption()}
        </Select>
      </Spin>
    );
  }
}

const RegionInfo = (props) => {

  const { provinceId, cityId } = props
  const [province, setProvince] = useState()
  const [city, setCity] = useState()

  useEffect(() => {
    if (provinceId && cityId) {
      queryRegionByIds(`${provinceId},${cityId}`)
        .then((data) => {
          if (data.data) {
            data.data.forEach(region => {
              if (region.id === provinceId) {
                setProvince(region)
              }
              if (region.id === cityId) {
                setCity(region)
              }
            });
          }
        })
    }
  }, [])

  return (
    <div>{province ? province.name : ''}-{city ? city.name : ''}</div>
  )

}


export { RegionInfo };

export default connect(({ loading, geo }) => {
  const { provinceList, cityList } = geo;
  return {
    provinceList,
    cityList,
    loading: loading.models.geo,
  };
})(RegionSelect);
